<template>
    <div class="main">
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
            <el-row :gutter="50">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="用户ID" prop="userKey">
                        <el-input @keyup.enter.native="search" v-model="listQuery.userKey" placeholder="用户id" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input @keyup.enter.native="search" v-model="listQuery.mobile" placeholder="手机号" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="活动ID" prop="activityId">
                        <el-input @keyup.enter.native="search" v-model="listQuery.activityId" placeholder="活动ID" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="奖品ID" prop="prizeId">
                        <el-input @keyup.enter.native="search" v-model="listQuery.prizeId" placeholder="奖品ID" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="" class="btn-item">
                <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="序号" prop="id" ></el-table-column>
            <el-table-column align="center" label="用户ID" prop="userId">
            </el-table-column>
            <el-table-column align="center" label="用户昵称" prop="nickname">   
            </el-table-column>
            <el-table-column align="center" label="手机号" prop="mobile" >
            </el-table-column>
            <el-table-column align="center" label="领取时间" prop="createdAt" >
             
            </el-table-column>        
            <el-table-column align="center" label="奖品名称" prop="prizeName">
            </el-table-column>
            <el-table-column align="center" label="奖品ID" prop="prizeId" >
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="listQuery.pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="listTotal">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'lotteryRecord',
    data(){
        return {
            listQuery: {
                userKey: '',
                mobile: '',
                activityId: '',
                prizeId: '',
                pageIndex: 1,
                pageSize: 10
            },
            listLoading: false,
            list: [],
            listTotal: 0
        }
    },
    created(){
        this.getList();
    },
    methods: {
        // 搜索
        search() {
          this.listQuery.pageIndex = 1;
          this.getList();
        },
        // 清空搜索条件
        resetForm (formName) {
          this.$nextTick(() => {
            this.$refs[formName].resetFields()
          })
        },
        //切换每页条数
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getList()
        },
        // 切换分页
        handleCurrentChange(page) {
          this.listQuery.pageIndex = page;
          this.getList();
        },
        getList() {
            this.listLoading = true;
            this.request({
                url: '/lottery/system/record/list',
                method: 'post',
                data: this.listQuery
            }).then(({data, totalCount}) => {
                this.list = data;
                this.listTotal = totalCount;
                this.listLoading = false;
            }).catch(err => {
                console.log(err);
                this.list = [];
                this.listTotal = 0;
                this.listLoading = false;
            });
        }
    }
}
</script>

<style lang="scss">
    @import "../../../styles/mixin";
</style>